<!DOCTYPE html>
<html>
<head>
    <title>Circuit Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="circuitCanvas" width="500" height="280"></canvas>
    <script>
        const canvas = document.getElementById('circuitCanvas');
        const ctx = canvas.getContext('2d');

        /**
         * Draws a horizontal resistor symbol.
         * @param {number} x - The starting x-coordinate.
         * @param {number} y - The y-coordinate of the center line.
         * @param {number} width - The total width of the resistor symbol.
         * @param {number} height - The amplitude of the zigzags.
         */
        function drawResistor(x, y, width = 80, height = 20) {
            const dx = width / 8.0; // The resistor is drawn in 8 small segments
            ctx.moveTo(x, y);
            ctx.lineTo(x + 0.5 * dx, y);
            ctx.lineTo(x + 1.5 * dx, y - height / 2);
            ctx.lineTo(x + 3.5 * dx, y + height / 2);
            ctx.lineTo(x + 5.5 * dx, y - height / 2);
            ctx.lineTo(x + 7.5 * dx, y + height / 2);
            ctx.lineTo(x + 8 * dx, y);
            ctx.moveTo(x + width, y);
        }

        // --- Main Drawing ---
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = 'bold 24px serif';
        ctx.textAlign = 'center';

        // Define key coordinates for layout
        const yTop = 70;
        const yBottom = 230;
        const yMid = 150;
        const xBatt = 80;
        const x1_start = 140; // Start of the first resistor
        const x1_end = x1_start + 80; // End of the first resistor
        const x_junction = 260; // T-junction point
        const x2_start = 280; // Start of the parallel resistors
        const x2_end = x2_start + 80; // End of the parallel resistors
        const x_return = 420; // x-position for the common return wire

        ctx.beginPath();

        // Bottom wire (common ground return)
        ctx.moveTo(xBatt, yBottom);
        ctx.lineTo(x_return, yBottom);

        // Left side with Battery (EMF source)
        ctx.moveTo(xBatt, yBottom);
        ctx.lineTo(xBatt, 180); // To negative plate
        ctx.moveTo(xBatt - 15, 180); // Negative plate (short line)
        ctx.lineTo(xBatt + 15, 180);
        ctx.moveTo(xBatt, 180);
        ctx.lineTo(xBatt, 160);
        ctx.moveTo(xBatt - 25, 160); // Positive plate (long line)
        ctx.lineTo(xBatt + 25, 160);
        ctx.moveTo(xBatt, 160);
        ctx.lineTo(xBatt, yTop); // Up to the top wire
        
        // Top wire leading to the first resistor
        ctx.lineTo(x1_start, yTop);
        
        // First Resistor (in series)
        drawResistor(x1_start, yTop);
        ctx.fillText('R', x1_start + 40, yTop + 35);

        // Wire from the first resistor to the T-junction
        ctx.moveTo(x1_end, yTop);
        ctx.lineTo(x_junction, yTop);

        // --- Parallel Branches ---

        // Branch 1: Rightmost Resistor
        ctx.moveTo(x_junction, yTop);
        ctx.lineTo(x2_start, yTop);
        drawResistor(x2_start, yTop);
        ctx.fillText('R', x2_start + 40, yTop + 35);
        ctx.moveTo(x2_end, yTop);
        ctx.lineTo(x_return, yTop); // Connect to the common return wire

        // Branch 2: Middle Resistor
        ctx.moveTo(x_junction, yTop);
        ctx.lineTo(x_junction, yMid); // Wire down from T-junction
        ctx.lineTo(x2_start, yMid); // Wire right to the resistor start
        drawResistor(x2_start, yMid);
        ctx.fillText('R', x2_start + 40, yMid + 35);
        ctx.moveTo(x2_end, yMid);
        ctx.lineTo(x_return, yMid); // Connect to the common return wire
        
        // Common return wire (vertical)
        ctx.moveTo(x_return, yTop);
        ctx.lineTo(x_return, yMid);
        ctx.lineTo(x_return, yBottom);
        
        ctx.stroke();

        // Label for EMF source
        ctx.fillText('ξ', xBatt - 30, 130);

    </script>
</body>
</html>